(function () {
    particlesJS('particles-js',
      {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 100
            }
          },
          "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 5,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "repulse"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 400,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 400,
              "size": 40,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true,
        "config_demo": {
          "hide_card": false,
          "background_color": "#b61924",
          "background_image": "",
          "background_position": "50% 50%",
          "background_repeat": "no-repeat",
          "background_size": "cover"
        }
      }
  
    );
  })();
  
  
  (function () {
    const data = [
      {
        cover: './images/portfolios/1.png',
        title: '表单验证实例',
        link: './实验/1-表单验证.html',
        content: '表单验证',
        height: 660
      }, {
        cover: './images/portfolios/2.png',
        title: '留言表',
        link: './实验/2-留言表.html',
        height: 330
      },
      {
        cover: './images/portfolios/3.png',
        title: '选项卡',
        link: './实验/4-选项卡.html',
        height: 745
      },
      {
        cover: './images/portfolios/5.png',
        title: '购物车',
        link: './实验/5-购物车.html',
        height: 745
      },
      {
        cover: './images/portfolios/4.png',
        title: 'sidebar',
        link: './实验/3-sidebar.html',
        height: 330
      },
      {
        cover: './images/portfolios/6.png',
        title: '小方块移动',
        link: './实验/7-小方块移动.html',
        height: 330
      },
      {
        cover: './images/portfolios/7.png',
        title: '小方块矩阵',
        link: './实验/8-小方块矩阵.html',
        height: 660
      },
      {
        cover: './images/portfolios/8.png',
        title: '最简单的时钟',
        link: './实验/12-最简单的时钟.html',
        height: 330
      },
      {
        cover: './images/portfolios/9.png',
        title: '楼层导航',
        link: './实验/14-楼层导航.html',
        height: 745
      },
      {
        cover: './images/portfolios/10.png',
        title: '随机背景颜色',
        link: './实验/19-随机背景颜色.html',
        height: 330
      },
      {
        cover: './images/portfolios/11.png',
        title: '进度条',
        link: './实验/20-进度条.html',
        height: 745
      },
      {
        cover: './images/portfolios/12.png',
        title: '.记帐本',
        link: './实验/24-记帐本.html',
        height: 330
      },
    ];
  
    const cols = document.querySelectorAll('.waterfall-wrap ul')
    let searchInput = document.querySelector('#search-input')
    let ul2 = document.querySelector('.ul2')
    init()
  function init (){
    for (let i = 0; i < cols.length; i++) {
      cols[i].height = 0
    }
  
    data.forEach((item, i) => {
      const minCol = getMinCol()
  
      minCol.insertAdjacentHTML('beforeend', `
          <li class='box'>
          <img src="${item.cover}" alt="" />
          <div class="imgs-info">
                <h4 class='h4'>${item.title}</h4>
                <div class="imgs-links">
                  <a href="${item.link}"><i class="iconfont qm-link"></i></a>
                </div>
              </div>
          </li>
          `)
      minCol.height += item.height + 43
    })
  }
    // function insertImg(minCol) {
  
    // }
  
    function getMinCol() {
      let minCol = cols[0]
      for (let i = 1; i < cols.length; i++) {
        // console.log(i, cols[i].offsetHeight, minCol.offsetHeight);
        if (cols[i].height < minCol.height) minCol = cols[i]
      }
      return minCol
    }
  
  
  
  
  
  
    const lis = document.querySelectorAll('.waterfall-wrap ul li')
    console.log(lis);
  
  
    searchInput.addEventListener('keyup', function (e) {
  
      // if ((e.keyCode >= 48 && e.keyCode <= 57) ||
      //   (e.keyCode >= 65 && e.keyCode <= 90) ||
      //   (e.keyCode = 8)) {
  
      let result = data.filter(function (item) {
        let reg = new RegExp(searchInput.value, 'i')
        if (item.title.search(reg) != -1) {
          return item
        }
      })
      // if(e.keyCode = 8){
      //   result.splice(0)
      //   console.log(result);
      // }
      render(result)
  
      console.log(result);
  
   
  
      // if (searchInput.value.trim() === '') {
  
      //   result.splice(0)
      //   console.log(result);
      //   for (let i = 0; i < lis.length; i++) {
      //     lis[i].style.display = 'block'
  
      //   }
      // }
      if (searchInput.value.trim() === '') {
        cols[0].innerHTML = ''
        cols[1].innerHTML = ''
        cols[2].innerHTML = ''
      init()
      }
  
    }, false)
  
  
  
    function render(data) {
      cols[0].innerHTML = ''
        cols[1].innerHTML = ''
        cols[2].innerHTML = ''
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.display = 'none'
  
      }
      data.forEach(function (elem) {
        ul2.insertAdjacentHTML('beforeend', `
      <li class='box'>
      <img src="${elem.cover}" alt="" />
      <div class="imgs-info">
            <h4 class='h4'>${elem.title}</h4>
            <div class="imgs-links">
              <a href="${elem.link}"><i class="iconfont qm-link"></i></a>
            </div>
          </div>
      </li>
      `)
      })
   

  
    }
  
  
  
  
  })();
  
  